<template>
  <div class="review-card" :class="cardClass">
    <div class="audit-status">
      <img v-if="statusImage" class="logo lazyload" :src="statusImage" :alt="props.appInfo.status" />
    </div>
    <div v-if="props.appInfo.notSupportContentList?.length" class="region-row">
      <div class="row-title">
        部分服务由于产品原因未进行授权

        <span class="cursor-pointer check" @click="handlePreview">查看</span>
      </div>
    </div>
    <div v-if="props.appInfo.status === '驳回'" class="region-row">
      <div class="row-title">驳回理由</div>
      <div class="row-content">
        {{ props.appInfo.rejectReason || '/' }}
      </div>
    </div>
    <div class="region-row">
      <div class="row-title">应用名称</div>
      <div class="row-content">
        {{ props.appInfo.name }}
      </div>
    </div>
    <div class="region-row">
      <div class="row-title">应用描述</div>
      <div class="row-content">{{ props.appInfo.content || '/' }}</div>
    </div>
    <div class="region-row">
      <div class="row-title">申请时间</div>
      <div class="row-content">{{ props.appInfo.createTime }}</div>
    </div>
  </div>
  <div class="tabs"></div>
  <a-modal
    :open="previewVisible"
    :footer="null"
    width="536px"
    :body-style="{ borderRadius: '4px' }"
    get-container=".tabs"
    @cancel="handleCancel"
  >
    <template #title>
      <div class="modalTitle">未授权服务</div>
    </template>
    <div class="example">
      <a-list bordered :data-source="props.appInfo.notSupportContentList">
        <template #renderItem="{ item, index }">
          <a-list-item :class="{ 'alternate-row': index % 2 !== 1, textLeft: true }">
            <div class="exceedingEllipsis" :title="item"><i class="cursor-pointer icon-File iconfont"></i>{{ item }}</div>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue'

  import approved from '@/assets/img/check-log/approved.svg'
  import reviewReject from '@/assets/img/check-log/reviewReject.svg'
  import underReview from '@/assets/img/check-log/underReview.svg'
  interface StatusImageMap {
    [key: string]: string
  }
  const props = defineProps({
    appInfo: {
      type: Object,
      default: () => {}
    }
  })
  //审核状态值
  const statusImageMap: StatusImageMap = {
    通过: approved,
    驳回: reviewReject,
    待审核: underReview
  }

  const statusImage = computed(() => {
    return statusImageMap[props.appInfo.status] as string
  })

  const cardClass = computed(() => {
    return {
      approved: props.appInfo.status === '通过',
      reviewReject: props.appInfo.status === '驳回',
      underReview: props.appInfo.status === '待审核'
    }
  })
  //预览
  const previewVisible = ref<boolean>(false)

  const handlePreview = async (): Promise<void> => {
    previewVisible.value = true
  }
  const handleCancel = () => {
    previewVisible.value = false
  }

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .review-card {
    display: flex;
    align-items: flex-start;
    padding: 20px 20px 32px;
    width: 100%;
    border: 1px solid #e8e8eb;
    border-radius: 8px;
    flex-direction: column;
    gap: 20px;

    .audit-status {
      width: 64px;
      height: 57px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .region-row {
      // height: 54px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: space-between;

      .row-title {
        height: 22px;
        font-size: 14px;
        color: rgba(25, 25, 48, 0.45);
        line-height: 22px;

        .check {
          color: #1868e9;
        }
      }

      .row-content {
        font-size: 16px;
        // height: 24px;
        color: rgba(16, 16, 20, 0.95);
        line-height: 24px;
        word-break: break-all;
      }
    }
  }

  .approved {
    background: linear-gradient(180deg, rgba(92, 201, 105, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #fff;
  }

  .reviewReject {
    background: linear-gradient(180deg, rgba(228, 72, 51, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #fff;
  }

  .underReview {
    background: linear-gradient(180deg, rgba(245, 151, 0, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #fff;
  }

  .example {
    overflow-y: auto;
    min-height: 500px;
    max-height: 700px;
    text-align: center;
    border-radius: 4px;

    .alternate-row {
      background-color: #fafafa;
    }

    .textLeft {
      padding: 12px 16px;
      text-align: left;

      .exceedingEllipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .iconfont {
      margin-right: 8px;
    }
  }
</style>
